import { useEffect, useRef, useState } from 'react';
import './App.css';
import {Button, Card} from 'antd';
// import { ipcRenderer } from 'electron'

// console.log('getUser', ipcRenderer);
// console.log('getUser', window.electron);

function App() {
  const firistRef = useRef(true); // Fixed：react18后，严格模式下useEffect会执行两次
  const [users, setUsers] = useState<any[]>([])
  const getUser = ()=> {
    console.log('getUser');
    window.electron.ipcRenderer.sendMessage('getUser', '获取用户列表');
  }

  const listionUser = () => {
    return window.electron.ipcRenderer.on('userList', (data: any)=> {
      console.log('userList', data);
      setUsers(JSON.parse(data));
    })
  }

  useEffect(()=> {
    if(!firistRef.current) return;
    firistRef.current = false;
    listionUser();
  }, [])

  return (
    <div className="App">
      <h1>hello world</h1>
      <Button onClick={getUser} type="primary">获取用户</Button>
      <Card>
        <ul>
          {
            users.map((user, index)=> 
              <li key={index}>{user.name}</li>
            )
          }
        </ul>
      </Card>
    </div>
  );
}

export default App;
